import React, { useState } from "react";
import { Button } from "@ct0/ui";

export default function ButtonPanel() {
  const [loading, setLoading] = useState(false);

  return (
    <div>
      <h2>Button 组件</h2>
      <ul>
        <li>Button 组件一共提供了三种基本样式和五种状态，配合使用</li>
        <li>三种基本样式：蓝色 / 红色 / 灰色(默认)</li>
        <li>
          五种状态：默认状态 / 悬停状态 / 点击时的激活状态 / 禁用状态 /
          加载中状态
        </li>
      </ul>
      <h2>调用方式</h2>
      <div>
        <h4>引用</h4>
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            import {"\u007b"} Button {"\u007d"} from '@ct0/ui'{"\n"}
          </code>
        </pre>
        <h4>基础的三种样式</h4>
        <Button type="blue">blue</Button>&nbsp;
        <Button type="red">red</Button>&nbsp;
        <Button>default</Button>&nbsp;
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            {`// type 取值不同 red / blue / default
<Button type="blue">blue</Button>`}
          </code>
        </pre>
        <h4>禁用状态</h4>
        <Button type="blue" disabled={true}>
          blue
        </Button>
        &nbsp;
        <Button type="red" disabled={true}>
          red
        </Button>
        &nbsp;
        <Button disabled={true}>default</Button>&nbsp;
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            {`<Button type="blue" disabled={true}>blue</Button>`}
          </code>
        </pre>
        <h4>加载中状态</h4>
        <Button type="blue" loading={true}>
          blue
        </Button>
        &nbsp;
        <Button
          type="red"
          loading={loading}
          onClick={() => {
            setLoading(true);
            setTimeout(() => setLoading(false), 2000);
          }}
        >
          click me !
        </Button>
        <pre style={{ marginTop: "10px" }}>
          <code className="language-jsx">
            {`<Button type="blue" loading={true}>blue</Button>`}
          </code>
        </pre>
      </div>

      <h2>API</h2>
      <table border="1" cellPadding="5">
        <thead>
          <tr>
            <th>参数</th>
            <th>必填</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>type</td>
            <td></td>
            <td>按钮的类型</td>
            <td>blue | red | default</td>
            <td>default</td>
          </tr>
          <tr>
            <td>text</td>
            <td></td>
            <td>按钮上显示的文字</td>
            <td>string</td>
            <td></td>
          </tr>
          <tr>
            <td>children</td>
            <td></td>
            <td>按钮中的内容</td>
            <td>React.ReactNode</td>
            <td></td>
          </tr>
          <tr>
            <td>disabled</td>
            <td></td>
            <td>按钮禁用状态</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>loading</td>
            <td></td>
            <td>按钮的加载中状态</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>style</td>
            <td></td>
            <td>Button自定义样式</td>
            <td>CSSProperties</td>
            <td></td>
          </tr>
          <tr>
            <td>className</td>
            <td></td>
            <td>Button类名</td>
            <td>string</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
